import React, {PureComponent, Fragment} from 'react'
import { WriterTitle, FindMore, ListContent, WriterList} from './style'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { actionCreater } from './store' 
import { Icon } from 'antd'
class TitleList extends PureComponent{
    componentDidMount(){
     this.props.getTitleList()
    }
    render(){ 
            const { writerList } = this.props;
        return(
            <Fragment>
                    <WriterTitle>
                        <div className = 'remmendwriter'>推荐作者</div>
                        <div className = 'remmendchange'>换一批</div>
                    </WriterTitle>
                     
                    <WriterList>
                         {   
                           writerList.map((items, index) => {
                               return (
                                <ListContent key = {index}>
                                <img alt = '' className = 'list-img' src = {items.get('urlImg')} />
                                <div className = 'concern'>
                                <Icon type="plus" theme="outlined" />
                                   关注
                                </div>
                                <div className = 'List-title' >{items.get('title')}</div>
                                <p className = 'culture'>写了{items.get('culture1')}k字 · {items.get('culture2')}喜欢</p>
                            </ListContent>
                               )
                                
                               
                            
                            })
                            }
                     </WriterList>
                     <Link to= '/rta'>
                        <FindMore>
                            查看全部
                            <Icon className= 'f-img' type="right" theme="outlined" />
                        </FindMore>
                     </Link>
                     
            </Fragment>
        )
    }
}
const mapState = (state) => ({
    writerList: state.getIn(['titleList', 'writerList'])
    })
const mapDispatch = (dispatch) => ({
    getTitleList(){
      dispatch(actionCreater.getTitleData())
    }
})
export default connect(mapState, mapDispatch)(TitleList);